<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<title>FAA Airport Status</title>
		<script type="text/javascript" src="tgd/Utilities/Throbber.js"></script>
		<script type="text/javascript" src="tgd/Services/FAA/AirportStatus.js"></script>
		<script type="text/javascript">
			//<![CDATA[

			function load(code) {
				var b = document.getElementById("body");
				var info = document.getElementById("info");
				var status = document.getElementById("status");
				var weather = document.getElementById("weather");
				var t = new tgd.Utilities.Throbber();

				b.appendChild(t.getCanvas());
				t.start();

				var self = this;
				this.pkb = new tgd.Services.FAA.AirportStatus(code, function() {
					t.stop();
					b.removeChild(t.getCanvas());

					info.innerHTML = "Name: " + self.pkb.getData().name + "<br />" +
						"ICAO: " + self.pkb.getData().ICAO + "<br />" +
						"Delay: " + self.pkb.getData().delay + "<br />" +
						"IATA: " + self.pkb.getData().IATA;

					status.innerHTML = "avgDelay: " + self.pkb.getData().status.avgDelay + "<br />" +
						"Closure End: " + self.pkb.getData().status.closureEnd + "<br />" +
						"Closure Begin: " + self.pkb.getData().status.closureBegin + "<br />" +
						"Type: " + self.pkb.getData().status.type + "<br />" +
						"Minimum Delay: " + self.pkb.getData().status.minDelay + "<br />" +
						"Trend: " + self.pkb.getData().status.trend + "<br />" +
						"Reason: " + self.pkb.getData().status.reason + "<br />" +
						"Maximum Delay: " + self.pkb.getData().status.maxDelay + "<br />" +
						"End Time: " + self.pkb.getData().status.endTime;

					weather.innerHTML = "Weather: " + self.pkb.getData().weather.weather + "<br />" +
						"Credit: " + self.pkb.getData().weather.meta.credit + "<br />" +
						"URL: " + self.pkb.getData().weather.meta.url + "<br />" +
						"Updated: " + self.pkb.getData().weather.meta.updated + "<br />" +
						"Wind: " + self.pkb.getData().weather.wind + "<br />" +
						"Temperature: " + self.pkb.getData().weather.temp + "<br />" +
						"Visibility: " + self.pkb.getData().weather.visibility;
				});
			}
			
			//]]>
		</script>

		<style type="text/css">
			body,html{margin:0;height:100%;width:100%;background:#333;}
			.throbber{position:absolute;top:0;left:0;height:100%;width:100%;font-size:xx-large;font-weight:bold;text-align:center;font-family:'OCR A Extended',Calibri;background:#A4C639;color:#fff;}

			#menu{border-bottom:solid 1px #ccc;background:#A4C639;color:#666;}
			#menu input{background:#333;margin:0;padding:0;border:solid 1px #ccc;color:#A4C639;font-weight:bold;padding:1px;font-family:consolas;line-height:1em;}

			#content div{background:#fff;font-family: Consolas, "Lucida Console" ,monospace;padding: 3px;margin: 10px;}
			#content div h1{margin: 0;padding: 3px;font-size: 1.3em;font-family: calibri;background: #A4C639;color: #fff;border: solid 1px #333;}
			#content div p{padding:5px;margin:0;}
			#content div h1 a{color: #fff;}
			#content div p a{color: #333;font-weight:bold;}
		</style>
	</head>
	<body id="body">
		<div id="menu">
			<label for="txtCode">Airport Code:</label>
			<input id="txtCode" type="text" maxlength="3" size="3" onkeyup="if (event.keyCode == 13) { load(this.value); }" />
		</div>
		<div id="content">
			<div>
				<h1>Instructions</h1>
				<p>Enter an airport code above and press enter.  e.g. PIT, CHM, YGR, PKB</p>
			</div>
			<div>
				<h1>Info</h1>
				<p id="info"></p>
			</div>
			<div>
				<h1>Status</h1>
				<p id="status"></p>
			</div>
			<div>
				<h1>Weather</h1>
				<p id="weather"></p>
			</div>
		</div>
	</body>
</html>
